.euiColorPicker {
  position: relative;
  width: $euiColorPickerWidth;
}

.euiColorPicker__popoverAnchor {
  // Nested needed for specificity of overriding .euiFieldText
  .euiColorPicker__input {
    @include euiFormControlWithIcon($isIconOptional: false, $side: 'right');

    &[class*='--compressed'] {
      @include euiFormControlWithIcon(
        $isIconOptional: false,
        $side: 'right',
        $compressed: true
      );
    }

    + .euiFormControlLayoutIcons {
      // Override :disabled state, which obscures the selected color
      color: inherit;
    }
  }
}

// Adds a stroke color for the swatchInput icon. Unlike most EuiIcons it has a stroke in the SVG
.euiSwatchInput__stroke {
  fill: none;
  stroke: transparentize($euiColorFullShade, 0.8);
}

.euiColorPicker__popoverPanel--pickerOnly {
  // Override of EuiPanel padding
  // sass-lint:disable no-important
  padding-bottom: 0 !important;
}

// sass-lint:disable no-important
.euiColorPicker__input--inGroup {
  height: $euiFormControlLayoutGroupInputHeight !important;
  box-shadow: none !important;
  border-radius: 0;

  &.euiFieldText--compressed {
    height: $euiFormControlLayoutGroupInputCompressedHeight !important;
    border-radius: 0;
  }
}

.euiColorPicker__alphaRange {
  .euiRangeInput {
    min-width: 0;
  }
}
